<template>
  <div
    class="project-train-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="warp-container">
      <div class="project-drawer">
        <div class="drawer-header">项目列表</div>
        <div class="drawer-body">
          <div class="screen-container">
            <a-select
              v-model="queryInfo.areaCode"
              placeholder="请选择所属区位"
              allowClear
              @change="changeAreaCode($event)"
            >
              <a-icon slot="suffixIcon" type="caret-down" />

              <a-select-option
                :value="item.dicItemCode"
                v-for="(item, index) in areaData"
                :key="index"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
            <a-select
              v-model="queryInfo.status"
              placeholder="请选择项目状态"
              allowClear
              @change="changeProject($event)"
            >
              <a-icon slot="suffixIcon" type="caret-down" />
              <a-select-option
                :value="item.dicItemCode"
                v-for="(item, index) in projectStatusData"
                :key="index"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
          </div>
          <div class="project-list-container">
            <div
              :class="[activeIndex == index && 'active', 'list-item']"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <div
                class="name"
                :title="item.proName"
                @click.stop="getDetail(item, index)"
              >
                {{ item.proName }}
              </div>
              <div class="in-project" @click.stop="gotoProject(item)">
                进入项目
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">
        <a-row :gutter="24" class="statistics-card">
          <a-col
            class="gutter-box-1"
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
          >
            <div class="card-item">
              <div class="icon">
                <div class="ring"></div>
                <div class="ld"></div>
                <div class="book"></div>
              </div>
              <div class="statistics-warp">
                <div class="name">项目总数</div>
                <div class="number">{{ dataSoucre.allCount || 0 }}</div>
              </div>
            </div>
          </a-col>
          <a-col
            class="gutter-box-2"
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
          >
            <div class="card-item">
              <div class="icon">
                <div class="ring"></div>
                <div class="ld"></div>
                <div class="book"></div>
              </div>
              <div class="statistics-warp">
                <div class="name">在建项目数</div>
                <div class="number">{{ dataSoucre.ingCount || 0 }}</div>
              </div>
            </div>
          </a-col>
          <a-col
            class="gutter-box-3"
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
          >
            <div class="card-item">
              <div class="icon">
                <div class="ring"></div>
                <div class="ld"></div>
                <div class="book"></div>
              </div>
              <div class="statistics-warp">
                <div class="name">本年新开项目数</div>
                <div class="number">{{ dataSoucre.newCount || 0 }}</div>
              </div>
            </div></a-col
          >
          <a-col
            class="gutter-box-4"
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
          >
            <div class="card-item">
              <div class="icon">
                <div class="ring"></div>
                <div class="ld"></div>
                <div class="book"></div>
              </div>
              <div class="statistics-warp">
                <div class="name">本年交工项目数</div>
                <div class="number">{{ dataSoucre.completeCount || 0 }}</div>
              </div>
            </div></a-col
          >
        </a-row>
        <div class="new-container">
          <div class="news-title">项目新闻大事记</div>
          <div class="news-body">
            <template v-if="newsData.length > 0">
              <div
                class="news-item"
                v-for="(item, index) in newsData"
                :key="index"
                @click.stop="handlePanel(item, index)"
                :class="[item.show && 'panel', item.mouse && 'mouseHover']"
                @mouseenter="handleMouseOver(item, index)"
                @mouseleave="handleMouseOut(item)"
              >
                <div class="news-main">
                  <div class="news-image">
                    <ViewerImg
                      :toolbar="false"
                      :title="false"
                      v-if="getUrl(item.image)"
                    >
                      <img :src="getUrl(item.image)" alt="暂无图片" />
                    </ViewerImg>
                    <div v-else class="not-data">暂无图片</div>
                  </div>
                  <div class="news-content">
                    <div class="sub-title">
                      {{ item.title }}
                    </div>
                    <!-- <div class="body">
                      {{ item.introduction }}
                    </div> -->
                    <div class="date">
                      <div>项目：{{ item.proName }}</div>
                      <div class="release">
                        发布日期：{{ item.releaseDate }}
                      </div>
                      <div class="date-item">发布人：{{ item.publisher }}</div>
                    </div>
                  </div>
                </div>
                <div class="news-line" v-if="item.show"></div>
                <div class="news-panel" :class="[item.show ? 'show' : 'hide']">
                  <div v-html="item.content"></div>
                  <div class="closure" @click.stop="handleClose(item, index)">
                    收起<a-icon type="up" />
                  </div>
                </div>
              </div>
            </template>
            <a-empty v-else :image="simpleImage" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
import { Empty } from "ant-design-vue";
import { axios } from "@/utils/request";
export default {
  name: "ProjectTrain",
  components: {
    ViewerImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      queryInfo: {
        areaCode: undefined,
        status: undefined,
      },
      areaData: [], //区位
      projectStatusData: [], //项目状态
      tableData: [],
      dataSoucre: {},
      proCode: "",
      activeIndex: null,
      newsData: [],
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleMouseOver(item, index) {
      this.newsData[index].mouse = true;
      setTimeout(() => {
        this.newsData[index].mouse = false;
      }, 800);
    },
    handleMouseOut() {
      this.newsData.forEach((v) => {
        v.mouse = false;
      });
    },
    handlePanel(item, index) {
      this.newsData.forEach((v) => {
        if (item.uuid != v.uuid) {
          v.show = false;
        }
      });
      this.newsData[index].show = true;
    },
    handleClose(item, index) {
      this.newsData[index].show = false;
    },

    //进入项目
    gotoProject(item = {}) {
      localStorage.setItem("CURRENT_PROJECT_DATA", JSON.stringify(item));
      this.$router
        .push({
          path: "/project/baseInfo/index",
          query: {},
        })
        .catch(() => {
          console.log("登录跳转首页出错,这个错误从哪里来的");
        });
    },

    getDetail(item, index) {
      let { proCode } = item;
      if (this.activeIndex == index) {
        this.activeIndex = null;
        this.proCode = "";
      } else {
        this.activeIndex = index;
        this.proCode = proCode;
      }
      this.getNewsData();
    },

    changeAreaCode() {
      this.activeIndex = null;
      this.proCode = "";
      this.getProjectData();
    },
    changeProject() {
      this.activeIndex = null;
      this.proCode = "";
      this.getProjectData();
    },

    getData() {
      Promise.all([
        this.getProjectData(),
        this.getStaticProject(),
        this.getLayerWorkAreaList(),
        this.getProStatusList(),
      ]).finally((_) => {});
    },

    //查询所属区位
    getLayerWorkAreaList() {
      return new Promise((resolve, reject) => {
        this.$post("/system/dicSet/getDicItemByCode", {
          code: "workArea",
        })
          .then((res) => {
            let { data } = res;
            this.areaData = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.areaData = [];
            reject();
          });
      });
    },

    //查询项目状态
    getProStatusList() {
      return new Promise((resolve, reject) => {
        this.$post("/system/dicSet/getDicItemByCode", {
          code: "proStatus",
        })
          .then((res) => {
            let { data } = res;
            this.projectStatusData = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectStatusData = [];
            reject();
          });
      });
    },

    //查询项目列表
    getProjectData() {
      return new Promise((resolve, reject) => {
        let { areaCode = "", status = "" } = this.queryInfo;
        axios
          .post(
            `/mdata/sysProject/getProjectByParentCode?parentCode=lianyungang`,
            {
              workArea: areaCode,
              proStatus: status,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.tableData = res?.data ?? [];
            this.getNewsData();
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },
    //查询统计
    getStaticProject() {
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/mdata/sysProject/getProjectStaticByParentCode?parentCode=lianyungang`,
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.dataSoucre = data;
            resolve();
          })
          .catch((_) => {
            this.dataSoucre = {};
            reject();
          });
      });
    },

    getNewsData() {
      let { areaCode = "", status = "" } = this.queryInfo;
      let { proCode } = this;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/portcommon/sysProjectDynamic/getPageSet?pageNo=${1}&pageSize=${9999}&order=desc&sort=releaseDate`,
            {
              proCode,
              workArea: areaCode,
              proStatus: status,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.newsData = res?.rows ?? [];
            this.newsData.forEach((item) => {
              this.$set(item, "show", false);
              this.$set(item, "mouse", false);
            });
            resolve();
          })
          .catch((_) => {
            this.newsData = [];
            reject();
          });
      });
    },

    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },
  },
};
</script>

<style lang="less" scoped>
.project-train-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  @keyframes rotateAni {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotateAniReverse {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  .warp-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 100px 50px 75px 50px;
    display: flex;
    overflow: hidden;
    .project-drawer {
      flex-shrink: 0;
      width: 400px;
      display: flex;
      flex-direction: column;
      .drawer-header {
        height: 36px;
        background: url(~@/assets/img/portalEntry/ztc_icon_7.png) no-repeat
          center;
        background-size: 100% 100%;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #ffff00;
        display: flex;
        align-items: center;
        padding-left: 50px;
      }
      .drawer-body {
        overflow: hidden;
        flex: 1;
        background: url(~@/assets/img/portalEntry/ztc_left_bg.png);
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        .screen-container {
          display: flex;
          align-items: center;
          padding: 10px 25px 20px;
          box-sizing: border-box;
          /deep/.ant-select {
            flex: 1;
            color: #ffffff;
            .ant-select-selection {
              border: 1px solid #00d5ff;
              background: rgba(0, 213, 255, 0.1);
              .ant-select-arrow {
                color: #b8e8ff;
              }
            }
            &:last-of-type {
              margin-left: 20px;
            }
          }
        }
        .project-list-container {
          flex: 1;
          .custom-scrollbar();
          box-sizing: border-box;
          padding: 0 25px 0 30px;
          margin-bottom: 30px;
          position: relative;
          .list-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #b8e8ff;
            height: 48px;
            padding: 0 4px 0 0;
            margin-bottom: 1px;
            &:hover {
              position: relative;
              color: #ffffff;
              background: linear-gradient(
                to right,
                rgba(184, 243, 255, 0.4),
                rgba(184, 243, 255, 0)
              );
              &::before {
                content: "";
                height: 48px;
                width: 16px;
                background: rgba(184, 243, 255, 0.4);
                border-left: 4px solid #00d5ff;
                position: absolute;
                top: 0;
                left: -16px;
              }
              .in-project {
                display: block;
              }
            }
            .name {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              height: 100%;
              line-height: 48px;
            }
            .in-project {
              text-align: right;
              width: 80px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #00ffff;
              display: none;
            }
            &.active {
              position: relative;
              color: #ffffff;
              background: linear-gradient(
                to right,
                rgba(184, 243, 255, 0.4),
                rgba(184, 243, 255, 0)
              );
              &::before {
                content: "";
                height: 48px;
                width: 16px;
                background: rgba(184, 243, 255, 0.4);
                border-left: 4px solid #00d5ff;
                position: absolute;
                top: 0;
                left: -16px;
              }
              .in-project {
                display: block;
              }
            }
          }
        }
      }
    }
    .right-container {
      padding-left: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .statistics-card {
        .card-item {
          width: 100%;
          height: 110px;
          display: flex;
          align-items: center;

          padding-left: 32px;
          box-sizing: border-box;
          .icon {
            width: 72px;
            height: 72px;
            position: relative;
            margin-right: 20px;
            .ring {
              position: absolute;
              height: 100%;
              width: 100%;
              animation: rotateAni 10s linear infinite;
            }
            .book {
              width: 29px;
              height: 28px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
            .ld {
              animation: rotateAniReverse 10s linear infinite;
              width: 60px;
              height: 60px;
              position: absolute;
              left: 6px;
              top: 6px;
            }
          }
          .statistics-warp {
            flex: 1;
            padding-right: 22px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #fafafa;
            }
            .number {
              font-size: 36px;
              font-family: D-DIN;
              font-weight: 400;
            }
          }
        }
        .gutter-box-1 {
          .card-item {
            background: url(~@/assets/img/portalEntry/ztc_icon_8.png);
            background-size: 100% 100%;
            .icon {
              .ring {
                background: url(~@/assets/img/portalEntry/ztc_ring_1.png);
                background-size: 100% 100%;
              }
              .ld {
                background: url(~@/assets/img/portalEntry/ztc_ld_1.png);
                background-size: 100% 100%;
              }
              .book {
                background: url(~@/assets/img/portalEntry/ztc_icon_1.png);
                background-size: 100% 100%;
              }
            }
            .statistics-warp {
              .number {
                color: rgba(0, 144, 255, 0);
                background: linear-gradient(
                  0deg,
                  #00f5de 30.2001953125%,
                  #ffffff 60.0341796875%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
        .gutter-box-2 {
          .card-item {
            background: url(~@/assets/img/portalEntry/ztc_icon_9.png);
            background-size: 100% 100%;
            .icon {
              .ring {
                background: url(~@/assets/img/portalEntry/ztc_ring_2.png);
                background-size: 100% 100%;
              }
              .ld {
                background: url(~@/assets/img/portalEntry/ztc_ld_2.png);
                background-size: 100% 100%;
              }
              .book {
                background: url(~@/assets/img/portalEntry/ztc_icon_2.png);
                background-size: 100% 100%;
              }
            }
            .statistics-warp {
              .number {
                color: rgba(0, 144, 255, 0);
                background: linear-gradient(
                  0deg,
                  #79e738 30.2001953125%,
                  #ffffff 60.0341796875%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
        .gutter-box-3 {
          .card-item {
            background: url(~@/assets/img/portalEntry/ztc_icon_10.png);
            background-size: 100% 100%;
            .icon {
              .ring {
                background: url(~@/assets/img/portalEntry/ztc_ring_3.png);
                background-size: 100% 100%;
              }
              .ld {
                background: url(~@/assets/img/portalEntry/ztc_ld_3.png);
                background-size: 100% 100%;
              }
              .book {
                background: url(~@/assets/img/portalEntry/ztc_icon_3.png);
                background-size: 100% 100%;
              }
            }
            .statistics-warp {
              .number {
                color: rgba(0, 144, 255, 0);
                background: linear-gradient(
                  0deg,
                  #f18b1e 30.2001953125%,
                  #ffffff 60.0341796875%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
        .gutter-box-4 {
          .card-item {
            background: url(~@/assets/img/portalEntry/ztc_icon_11.png);
            background-size: 100% 100%;
            .icon {
              .ring {
                background: url(~@/assets/img/portalEntry/ztc_ring_4.png);
                background-size: 100% 100%;
              }
              .ld {
                background: url(~@/assets/img/portalEntry/ztc_ld_4.png);
                background-size: 100% 100%;
              }
              .book {
                background: url(~@/assets/img/portalEntry/ztc_icon_4.png);
                background-size: 100% 100%;
              }
            }
            .statistics-warp {
              .number {
                color: rgba(173, 146, 249, 0);
                background: linear-gradient(
                  0deg,
                  #ad92f9 30.2001953125%,
                  #ffffff 60.0341796875%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
      .new-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .news-title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #ffff00;
          padding: 8px 0 8px 24px;
          position: relative;
          &::before {
            content: "";
            width: 18px;
            height: 18px;
            background: url(~@/assets/img/portalEntry/ztc_icon_12.png) no-repeat
              center;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .news-body {
          flex: 1;
          padding-right: 10px;
          .custom-scrollbar;
          position: relative;
          .news-item {
            min-height: 80px;
            background: url(~@/assets/img/portalEntry/ztc_icon_13.png) no-repeat
              center;
            background-size: 100% 100%;
            margin-bottom: 6px;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .news-main {
              display: flex;
              align-items: center;
              .news-image {
                width: 124px;
                height: 70px;
                margin-right: 24px;
                div {
                  width: 124px;
                  height: 70px;
                }
                img {
                  width: 124px;
                  height: 70px;
                }
                .not-data {
                  height: 100%;
                  width: 100%;
                  background: url(~@/assets/img/portalEntry/ztc_icon_15.png)
                    no-repeat center;
                  background-size: 100% 70%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
              .news-content {
                .sub-title {
                  font-family: Microsoft YaHei, Microsoft YaHei;
                  font-weight: 400;
                  font-size: 18px;
                  color: #00ffff;
                  margin-bottom: 2px;
                }
                .body {
                  font-family: Microsoft YaHei, Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                  color: #b8f3ff;
                }
                .date {
                  font-family: Microsoft YaHei, Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #8fdbfc;
                  display: flex;
                  align-items: center;
                  margin-top: 2px;
                  .release {
                    padding-left: 60px;
                    &::before {
                      content: "";
                      height: 16px;
                      width: 16px;
                      background: url(~@/assets/img/portalEntry/ztc_date.png);
                      background-size: 100% 100%;
                      margin-right: 10px;
                      display: inline-block;
                      position: relative;
                      top: 2px;
                    }
                  }
                  .date-item {
                    padding-left: 60px;
                    &::before {
                      content: "";
                      height: 16px;
                      width: 16px;
                      background: url(~@/assets/img/portalEntry/ztc_user.png);
                      background-size: 100% 100%;
                      margin-right: 10px;
                      display: inline-block;
                      position: relative;
                      top: 2px;
                    }
                  }
                }
              }
            }
            .news-line {
              margin-top: 20px;
              height: 1px;
              width: 100%;
              background: rgba(0, 213, 255, 0.5);
            }

            .news-panel {
              padding: 20px;
              box-sizing: border-box;
              &.show {
                display: block;
                transition: all 50s;
              }
              &.hide {
                display: none;
              }

              .closure {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #b8f3ff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                /deep/.anticon-up {
                  font-size: 14px;
                  margin-left: 4px;
                }
              }
            }
            &:last-of-type {
              margin-bottom: 0;
            }
            &.panel {
              background: unset;
              border: 1px solid rgba(0, 213, 255, 0.5);
              border-radius: 8px;
            }
            &.mouseHover {
              background: url(~@/assets/img/portalEntry/ztc_icon_14.png)
                no-repeat center;
              background-size: 100% 100%;
              .news-main {
                .news-content {
                  .sub-title {
                    color: #ffff00;
                  }
                  .body {
                    color: #ffffb8;
                  }
                  .date {
                    color: #ffffb8;
                  }
                }
              }
            }

            &:hover {
              cursor: pointer;
            }
          }
          /deep/ .ant-empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .ant-empty-description {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #b8f3ff;
            }
          }
        }
      }
    }
  }

  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    overflow-x: overlay !important;
    overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px !important;
      height: 10px !important;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      background: rgba(0, 213, 255, 0.3) !important;
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px !important;
      background: rgba(0, 213, 255, 0.1) !important;
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none !important;
    }
  }
}
</style>
